<template>
  <div class="LookLook">
        <div class="goods" v-for="(goods,index) in goodslist" :key="index">
           <img :src="goods.img" />
          <p>{{goods.name}}</p>
          <div>
            <p class="price">￥{{goods.price}}</p>
            <span>看相似</span>
          </div>
        </div>     
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "LookLook",
  data() {
    
    return {
      goodslist:"",
      goods:""
    };
  },
   created(){
    axios({
      url:"/goods?type3=look"
    })
    .then(res=>{
      this.goodslist=res.data
    })
  }
};
</script>

<style scoped>
@import url(../../assets/iconfont2/iconfont.css); 

.LookLook {
  width: 100%;
 
  background-color: #f7f7f7;
  display: flex;
 
  flex-wrap: wrap;
  
}
.LookLook .goods {
  width: 1.7rem;
  height: 2.4rem;
  background-color: white;
   border-radius: .1rem;
   margin-left: .12rem;
   margin-bottom: .06rem;
   padding-top: .15rem;
}
.LookLook .goods img{
  width: 1.7rem;
  height: 1.6rem;
}

.goods div{
  display: flex;
  justify-content:space-between ;
  margin-top: .1rem;
}
.goods p{
  font-size: .14rem;
  font-weight: 700;
  margin-left:.12rem ;
  margin-right: .12rem;
  margin-top:.1rem;
  text-align: center;
}
.goods  .price{
  color: #df6048;
  font-size: .16rem;
  font-weight: 500;
   line-height: .27rem;
   margin-top:0;
 
} 
.goods span{
  border: 1px solid lightgray;
  border-radius: .1rem;
  padding: 0 .1rem;
  font-size: .1rem;
  color: lightgray;
  margin-right: .1rem;
  line-height: .27rem;
}
</style>


